<!-- 概览 -->
<template>
  <div class="over_view">
    <div class="ov_real_time">
      <div class="ov_header">
        <div>实时监控</div>
        <el-select v-if="allView" v-model="base" @change="searchBase">
          <el-option
            v-for="(item, index) in baseOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div v-else>当前基地：{{ permission.shopName }}</div>
      </div>
      <div class="ov_content">
        <div class="ov_content_title">付款产品数量</div>
        <el-row :gutter="20">
          <el-col :span="15">
            <BarChart :chartData="timeData.orderItem" />
          </el-col>
          <el-col :span="9">
            <div class="ov_content_box">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="ov_content_total">
                    <b>收款金额（元）</b>
                    <h2>{{ timeData.todayMoney || 0 }}</h2>
                    <div>
                      昨日：
                      <span>{{ timeData.yestodayMoney || 0 }}</span>
                      <span>{{ timeData.comparedMoney || 0 }}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="ov_content_total">
                    <b>付款买家数</b>
                    <h2>{{ timeData.todayPayMember || 0 }}</h2>
                    <div>
                      昨日：
                      <span>{{ timeData.yestodayPayMember || 0 }}</span>
                      <span>{{ timeData.comparedPayMember || 0 }}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="ov_content_total">
                    <b>退款金额（元）</b>
                    <h2>{{ timeData.todayRefundMoney || 0 }}</h2>
                    <div>
                      昨日：
                      <span>{{ timeData.yestodayRefundMoney || 0 }}</span>
                      <span>{{ timeData.comparedRefundMoney || 0 }}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="ov_content_total">
                    <b>新增会员数</b>
                    <h2>{{ timeData.todayRegisteMember || 0 }}</h2>
                    <div>
                      昨日：
                      <span>{{ timeData.yestodayRegisterMember || 0 }}</span>
                      <span>{{ timeData.comparedRegisterMember || 0 }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="ov_ranking_list">
      <div class="ov_header">
        <div>排行榜</div>
        <div class="ov_header_date">
          <el-radio-group v-model="date" @change="searchDate">
            <el-radio-button
              v-for="(item, index) in dateOptions"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            @change="searchDate"
          />
        </div>
      </div>
      <el-row :gutter="20">
        <el-col v-for="(item, index) in rankingList" :key="index" :span="12">
          <div class="ov_ranking_item">
            <GeoLeaderboards
              :title="item.title"
              :which="item.which"
              :data="rankingData[item.dataKey]"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import BarChart from "@/components/overview/BarChart.vue";
import GeoLeaderboards from "@com/overview/GeoLeaderboards.vue";
import { ref } from "vue";
import useRoute from "@util/router";
import api from "@api/overview";
import auth from "@net/auth";

const permission = auth.getOverView()

const route = useRoute();

const allView = permission.isAll;

if (!allView) {
  searchBase(permission.shopCode)
} else {
  getConfig()
  getData()
}

route.watchRouter("overview", () => {
  getData();
});

const baseOptions = ref([]);
const dateOptions = [
  {
    label: "今日",
    value: 0,
  },
  {
    label: "昨日",
    value: 1,
  },
  {
    label: "近7日",
    value: 2,
  },
];


function getConfig() {
  api.base((val) => {
    val.unshift({ label: "全部基地", value: "all" });
    baseOptions.value = val;
  });
}

const base = ref(route.query().base || "all");
const date = ref(route.query().date || 0);

function searchDate(val) {
  route.replaceQuery("date", val);
}

function searchBase(val) {
  route.replaceQuery("base", val);
}

const rankingList = [
  {
    which: 1,
    title: "单一商品访问量",
    dataKey: "shopVisitItemList",
  },
  {
    which: 2,
    title: "商品购买榜",
    dataKey: "productItemItemList",
  },
  {
    which: 3,
    title: "旅行产品购买榜",
    dataKey: "travelItemList",
  },
  {
    which: 4,
    title: "酒店预订榜",
    dataKey: "hotelItemList",
  },
];

const timeData = ref({
  todayMoney: null,
  yestodayMoney: null,
  comparedMoney: null,
  todayRefundMoney: null,
  yestodayRefundMoney: null,
  comparedRefundMoney: null,
  todayPayMember: null,
  yestodayPayMember: null,
  comparedPayMember: null,
  todayRegisteMember: null,
  yestodayRegisterMember: null,
  comparedRegisterMember: null,
  orderItem: [],
});

const rankingData = ref({
  shopVisitItemList: [],
  productItemItemList: [],
  travelItemList: [],
  hotelItemList: [],
});

function getData() {
  realTime()
  rankTop();
}

function realTime() {
  let routeQuery = route.query();
  api.realTime(
    {
      shopCode: routeQuery.base,
    },
    (val) => {
      timeData.value = val;
    }
  );
}

function rankTop() {
  let routeQuery = route.query();
  api.rankTop(
    {
      shopCode: routeQuery.base,
      dateType: routeQuery.date,
    },
    (val) => {
      rankingData.value = val;
    }
  );
}
</script>
<style lang="scss">
.over_view {
  padding: 20px;
  .ov_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $background;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    .ov_header_date {
      display: flex;
      align-items: center;
    }
    .el-date-editor {
      margin-left: 10px;
    }
  }
  .ov_content {
    // height: 400px;
    .ov_content_title {
      font-size: 14px;
      margin: 10px 0;
    }
    .ov_content_box {
      padding-top: 60px;
    }
    .ov_content_total {
      margin: 20px 0;
      h2 {
        color: $primary;
        margin: 10px 0;
      }
      div {
        span {
          &:last-child {
            margin-left: 10px;
            color: red;
          }
        }
      }
    }
  }
  .ov_real_time {
    margin-bottom: 20px;
  }
  .ov_ranking_list {
    .ov_ranking_item {
      margin-top: 20px;
    }
  }
}
</style>
